<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
<script>
    var app = document.getElementById("app");

    var msg = "hello world";
    var count = 100;
    var list = [1, 4, 7, 2, 5, 8, 3, 6, 9];


    /* 
        传统ES6的模板语法
        ${} ES6模板字符串中的插值语句 
            1. 差值语句中可以放变量  =>   可以将变量拼接到模板字符串中
            2. 差值语句中可以放javascript表达式(算术表达式 关系表达式 逻辑表达式)   => 先求解表达式的结果,再将结果拼接到模板字符串中
            3. 差值语句中可以调用方法  => 先调用方法,在将方法的返回值拼接到模板字符串中
            4. 差值语句中可以进行简单的判断(三目运算符)  => 先判断,再将判断的结果拼接到模板字符串中

            小结: 
                最终都是将输出的结果,拼接到模板字符串
    
    */

    app.innerHTML = `<div id="app">
        <p class="${msg}">${msg}</p>
        <p>${count}</p>
        <p>${[1, 4, 7, 2, 5, 8, 3, 6, 9]}</p>

        <p>${1 + 1}</p>
        <p>${5 >= 3}</p>
        <p>${5 > 3 && 5 <= 10}</p>
        
        <p>${msg.split("").reverse().join("")}</p>
        <p>${count.toFixed(2)}</p>

        <p>${count % 2 == 0 ? '偶数': '奇数'}</p>  
    </div>`


    console.log(1 + 1);

</script>

</html>